<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

// 导入食品图片
import burgerImg from '@/assets/img/restaurant/burger.png'
import crispyBurgerImg from '@/assets/img/restaurant/crispy_burger.png'
import combo1Img from '@/assets/img/restaurant/combo1.png'
import combo2Img from '@/assets/img/restaurant/combo2.png'

const router = useRouter()

// 菜品数据
const foods = ref([
  { 
    id: 1, 
    name: '香辣鸡腿堡', 
    price: 22, 
    sales: 345,
    description: '经典汉堡',
    image: burgerImg,
    category: '人气推荐'
  },
  { 
    id: 2, 
    name: '劲脆鸡腿堡', 
    price: 22, 
    sales: 289,
    description: '外脆里嫩',
    image: crispyBurgerImg,
    category: '人气推荐'
  },
  { 
    id: 3, 
    name: '双人豪华套餐', 
    price: 89, 
    sales: 198,
    description: '两个汉堡+小食+可乐*2',
    image: combo1Img,
    category: '超值套餐'
  },
  { 
    id: 4, 
    name: '单人超值套餐', 
    price: 39, 
    sales: 425,
    description: '汉堡+小食+可乐',
    image: combo2Img,
    category: '超值套餐'
  }
])

const cartItems = ref([
  { id: 1, name: '香辣鸡腿堡', price: 22, count: 2, image: burgerImg },
  { id: 2, name: '薯条（大）', price: 15, count: 1, image: combo2Img }
])
const totalPrice = ref(59)

// 当前选中的分类
const activeCategory = ref('人气推荐')

// 添加到购物车
const addToCart = (food: any) => {
  const item = cartItems.value.find(i => i.id === food.id)
  if (item) {
    item.count++
  } else {
    cartItems.value.push({
      id: food.id,
      name: food.name,
      price: food.price,
      count: 1,
      image: food.image
    })
  }
  
  totalPrice.value = cartItems.value.reduce((sum, item) => sum + item.price * item.count, 0)
}

// 减少购物车商品数量
const removeFromCart = (id: number) => {
  const index = cartItems.value.findIndex(item => item.id === id)
  if (index !== -1) {
    if (cartItems.value[index].count > 1) {
      cartItems.value[index].count--
    } else {
      cartItems.value.splice(index, 1)
    }
    totalPrice.value = cartItems.value.reduce((sum, item) => sum + item.price * item.count, 0)
  }
}

// 增加购物车商品数量
const increaseCartItem = (id: number) => {
  const item = cartItems.value.find(i => i.id === id)
  if (item) {
    item.count++
    totalPrice.value = cartItems.value.reduce((sum, item) => sum + item.price * item.count, 0)
  }
}

// 结算跳转
const gotoCheckout = () => {
  router.push({ name: 'order-confirm' })
}

// 获取所有分类
const categories = ref(Array.from(new Set(foods.value.map(food => food.category))))
</script>

<template>
  <!-- 整个页面分为上中下三部分 -->
  <div class="flex flex-col h-screen">
    <!-- 顶部区域 -->
    <div class="bg-primary text-white">
      <!-- 商家头部信息 -->
      <div class="pt-4 pb-2 px-4">
        <div class="flex items-center">
          <button @click="router.back()" class="text-white">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          
          <div class="ml-2 flex-1">
            <div class="text-lg font-bold">肯德基（嘉年华店）</div>
            <div class="text-xs mt-1">月售999+ 好评率98%</div>
          </div>
          <button class="text-white">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"></path>
            </svg>
          </button>
        </div>
      </div>
      
      <!-- 商家公告 -->
      <div class="px-4 py-2 bg-blue-700 bg-opacity-90">
        <div class="flex text-sm text-white text-opacity-90">
          <div class="w-12">公告：</div>
          <div class="flex-1">新用户下单立减17元，更多优惠等你来享</div>
        </div>
      </div>
    </div>
    
    <!-- 中间菜单区域 (可滚动) -->
    <div class="flex-1 overflow-auto flex">
      <!-- 左侧分类导航 -->
      <div class="w-24 bg-gray-50">
        <div 
          v-for="(category, index) in categories" 
          :key="index"
          @click="activeCategory = category"
          class="py-3 px-2 text-center text-sm border-b border-gray-100 hover:bg-white cursor-pointer"
          :class="activeCategory === category ? 'bg-white font-medium text-primary' : ''"
        >
          {{ category }}
        </div>
      </div>
      
      <!-- 右侧菜品列表 -->
      <div class="flex-1 bg-white">
        <!-- 动态渲染当前分类的菜品 -->
        <div v-for="category in categories" :key="category">
          <div v-if="activeCategory === category" class="pb-4">
            <h3 class="px-3 py-2 bg-gray-50 text-gray-600 text-sm font-medium">{{ category }}</h3>
            <div class="px-3">
              <!-- 遍历当前分类的菜品 -->
              <div 
                v-for="food in foods.filter(f => f.category === category)" 
                :key="food.id"
                class="py-3 flex border-b border-gray-100"
              >
                <!-- 食品图片 -->
                <div class="w-16 h-16 rounded overflow-hidden mr-3 flex-shrink-0">
                  <img :src="food.image" class="w-full h-full object-cover" />
                </div>
                <div class="flex-1 min-w-0">
                  <div class="font-bold text-gray-800 truncate">{{ food.name }}</div>
                  <div class="text-xs text-gray-500 mt-1 truncate">{{ food.description }}</div>
                  <div class="mt-1 flex items-center">
                    <span class="text-red-500 font-bold">¥{{ food.price }}</span>
                    <span class="text-xs text-gray-500 ml-2">月售{{ food.sales }}</span>
                  </div>
                </div>
                <button 
                  @click="addToCart(food)"
                  class="w-8 h-8 rounded-full bg-primary text-white self-center flex items-center justify-center hover:bg-primary-dark flex-shrink-0"
                >
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                  </svg>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部购物车区域 -->
    <div class="border-t border-gray-200 bg-white z-20">
      <div class="max-w-screen-md mx-auto w-full">
        <!-- 购物车摘要 -->
        <div class="px-4 py-3 flex justify-between items-center">
          <!-- 购物车图标及数量 -->
          <div class="flex items-center">
            <div class="relative">
              <svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
              </svg>
              <div 
                v-if="cartItems.length > 0" 
                class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 rounded-full text-xs flex items-center justify-center text-white"
              >
                {{ cartItems.reduce((sum, item) => sum + item.count, 0) }}
              </div>
            </div>
            <div class="ml-2">
              <div class="text-lg font-bold">¥{{ totalPrice }}</div>
              <div class="text-xs text-gray-500">已选{{ cartItems.reduce((sum, item) => sum + item.count, 0) }}件</div>
            </div>
          </div>
          
          <!-- 去结算按钮 -->
          <button 
            @click="gotoCheckout"
            class="bg-primary text-white py-2 px-6 rounded-full font-bold hover:bg-primary-dark"
            :class="totalPrice === 0 ? 'opacity-50' : ''"
          >
            去结算
          </button>
        </div>
        
        <!-- 购物车商品列表 -->
        <div 
          v-if="cartItems.length > 0" 
          class="border-t border-gray-100 max-h-32 overflow-y-auto px-4"
        >
          <div 
            v-for="item in cartItems" 
            :key="item.id" 
            class="py-3 flex items-center border-b border-gray-100 last:border-b-0"
          >
            <!-- 购物车商品图片 -->
            <div class="w-10 h-10 rounded overflow-hidden mr-3 flex-shrink-0">
              <img :src="item.image" class="w-full h-full object-cover" />
            </div>
            <div class="font-medium flex-1 truncate">{{ item.name }}</div>
            <div class="text-primary font-bold ml-2">¥{{ item.price }}</div>
            <div class="w-32 flex justify-end items-center ml-3">
              <button 
                @click="removeFromCart(item.id)"
                class="w-7 h-7 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"
              >
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 12H4"></path>
                </svg>
              </button>
              <span class="mx-2 w-6 text-center">{{ item.count }}</span>
              <button 
                @click="increaseCartItem(item.id)"
                class="w-7 h-7 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200"
              >
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bg-primary {
  background-color: #1a73e8;
}
.bg-primary-dark {
  background-color: #1669c1;
}

/* 购物车宽度与顶部对齐 */
@media (min-width: 768px) {
  .max-w-screen-md {
    max-width: 768px;
  }
}
</style>